import React,{FC} from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import MessageImage from './MessageImage/MessageImage';
import MessageContent from './MessageContent/MessageContent';
export interface IProps extends ICompProps {
    isRead:boolean;
    message:string;
    messageType:'sys'|'order'|'interact';
    handleClick:()=>void;
}
MessageItem.defaultProps = {} as Partial<IProps>;
function MessageItem(props: IProps) {
  const { className, style, isRead, message, messageType,handleClick} = props;
const localClassName = useClassName('MessageItem', className);
return <RootView className={localClassName} style={style} onClick={handleClick}>
    <MessageImage messageType={messageType} isRead={isRead}></MessageImage>
    <MessageContent messageType={messageType} message={message}></MessageContent>
</RootView>;
}
export default React.memo(MessageItem  as FC<IProps>);
const RootView = styled(View)`&.MessageItem { 
    width: 670px;
    height: 96px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}`